import Vue from 'vue';
import Vuex from 'vuex';
import App from './App.vue';
import fontawesome from './fontawesome.js';
import router from './router';
Vue.use(fontawesome);


// 调用Vuex.install(Vue) 传入Vue
Vue.use(Vuex);

const store = new Vuex.Store({
  state: () => ({
    title: 'root moudle'
  }),
  mutations: {
    SET_TITLE: (state, value) => state.title = value,
  },
  getters: {
    g1(state, getters) {
      return 'root g1' + state.title;
    },
    g2(state, getters) {
      return 'root g2'
    }
  },
  actions: {
    say(store, value) {
      console.log(value + store.state.title);
    }
  },
  modules: {
    cart: {
      namespaced: true,
      state: () => ({
        title: 'cart moudle'
      }),
      mutations: {
        SET_TITLE: (state, value) => state.title = value,
      },
      getters: {
        g1(state, getters, rootState) {
          return 'cart g1' + state.title + getters.g2 + rootState.title;
        },
        g2(state, getters) {
          return 'cart g2'
        }
      },
      actions: {
        say(store, value) {
          console.log(value + store.state.title + store.rootState.title);
        }
      },

    },
    shop: {
      namespaced: true,
      state: () => ({
        title: 'shop moudle'
      }),
      mutations: {
        SET_TITLE: (state, value) => state.title = value,
      },
      getters: {
        g1(state, getters) {
          return 'shop g1' + state.title;;
        },
      },
      actions: {
        say(store, value) {
          console.log(value + store.state.title + store.rootState.title);
        }
      },
      modules: {
        localShop: {
          namespaced: true,
          state: () => ({
            title: 'localShop moudle'
          }),
          mutations: {
            SET_TITLE: (state, value) => state.title = value,
          },
          getters: {
            g1(state, getters) {
              return 'localShop g1' + state.title;;
            },
          },
          actions: {
            say(store, value) {
              console.log(value + store.state.title + store.rootState.title + store.rootGetters.g1);
            }
          },
        }
      }
    }
  }
});

new Vue({
  el: '#app',
  router,//路由表
  store,
  render: h => h(App),
});